<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
        <title>Share link via email Options</title>

		<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="options.css" />

		<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="functions.js"></script>
        <script type="text/javascript" src="options_events.js"></script>
    </head>

    <body>
		
	<div class="container">
        <div class="page-header">
        	<h1>Share link via email - Options</h1>
        </div>
	
		<form role="form">
		<div class="row">
			<div class="col-md-6">
		        <div class="row header-options">
		        	<div class="col-md-6">
		        		<h4>Email Sender Selection:</h4>
		        	</div>
		        </div>
		        <div class="row body-options">
		        	<div class="col-md-6">
		        		<div class="checkbox">
		        			<label>
		        				<input type="checkbox" id="mail_picker_0" value="all" /> All email senders
		        			</label>
		        		</div>
		        	</div>
		        </div>
		        <div class="row body-options">
		        	<div class="col-md-12">
		        		<div class="checkbox">
		        			<div class="row">
			        			<div class="col-xs-6">
				        			<label>
				        				<input type="checkbox" id="mail_picker_1" value="mailto" /> Default email client
				        			</label>
			        			</div>
			        			<div class="col-xs-6"> 
			        				<span class="tooltip-options">Uses 'mailto' protocol handler</span>
			        			</div>
		        			</div>
		        		</div>
		        		<div class="checkbox">
		        			<label>
		        				<input type="checkbox" id="mail_picker_5" value="mailto" /> AOL mail
		        			</label>
		        		</div>
		        		<div class="checkbox">
		        			<div class="row">
			        			<div class="col-xs-6">
			        				<label>
			        					<input type="checkbox" id="mail_picker_2" value="mailto" /> Gmail
			        				</label>
			        			</div>
			        			<div class="col-xs-6">
			        				<span class="tooltip-options" >Can use new lines</span>
			        			</div>
			        		</div>
		        		</div>
		        		<div class="checkbox">
		        			<label>
		        				<input type="checkbox" id="mail_picker_3" value="mailto" /> Outlook.com
		        			</label>
		        		</div>
		        		<div class="checkbox">
		        			<label>
		        				<input type="checkbox" id="mail_picker_4" value="mailto" /> Yahoo! Mail
		        			</label>
		        		</div>
		        	</div>
		        </div>
        	</div>
        	<div class="col-md-6">
        		<div class="row header-options">
		        	<div class="col-md-6">
		        		<h4>Open in new window?</h4>
		        	</div>
		        </div>
		        <div class="row body-options">
		        	<div class="col-md-6">
		        		<div class="checkbox new-win-checkbox">
		        			<label>
		        				<input type="checkbox" id="new_window_0" value="all"/> All email senders
		        			</label>
		        		</div>
		        	</div>
		        </div>
		        <div class="row body-options">
		        	<div class="col-md-6">
		        		<div class="checkbox new-win-checkbox">
		        			<label>
		        				<input type="checkbox" id="new_window_1" value="newWindow"/> Default email client
		        			</label>
		        		</div>
		        		<div class="checkbox new-win-checkbox">
		        			<label>
		        				<input type="checkbox" id="new_window_5" value="newWindow"/> AOL mail
		        			</label>
		        		</div>
		        		<div class="checkbox new-win-checkbox">
		        			<label>
		        				<input type="checkbox" id="new_window_2" value="newWindow"/> Gmail
		        			</label>
		        		</div>
		        		<div class="checkbox new-win-checkbox">
		        			<label>
		        				<input type="checkbox" id="new_window_3" value="newWindow"/> Outlook.com
		        			</label>
		        		</div>
		        		<div class="checkbox new-win-checkbox">
		        			<label>
		        				<input type="checkbox" id="new_window_4" value="newWindow"/> Yahoo! Mail
		        			</label>
		        		</div>
		        	</div>
		        </div>
        	</div>
        </div>
        
        <br/>
        
        <div class="row header-options">
        	<div class="col-md-12">
        		<h4>Email Body Settings:</h4>
        	</div>
        </div>
        <div class="row body-options">
        	<div class="col-md-12">
	        	<div class="form-group">
		        	<label for="mail_to">To: </label>
		        	<input type="text" id="mail_to" class="form-control" />
	        	</div>
	        </div>
        </div>
        <div class="row body-options">
        	<div class="col-md-6">
	        	<div class="form-group">
		        	<label for="mail_before">Before URL message: </label>
		        	<input type="text" id="mail_before" class="form-control" />
	        	</div>
	        </div>
	        <div class="col-md-2 col-xs-3">
		        <div class="checkbox">
			        <label>
			        	New line before URL <input type="checkbox" id="newLineAfter" value="newLineAfter" />
			        </label>
		        </div>
	        </div>
	        <div class="col-md-4 col-xs-9">
		        <div class="form-group col-xs-4">
		        	<input type="number" min="0" id="newLineAfterNum" class="form-control" value="0"/>
		        </div>
	        </div>
        </div>
        <div class="row body-options">
        	<div class="col-md-6">
	        	<div class="form-group">
		        	<label for="mail_after">After URL message: </label>
		        	<input type="text" id="mail_after" class="form-control"></input>
	        	</div>
	        </div>
	        <div class="col-md-2 col-xs-3">
		        <div class="checkbox">
			        <label>
			        	New line after URL <input type="checkbox" id="newLineBefore" value="newLineBefore"/>
			        </label>
		        </div>
	        </div>
	        <div class="col-md-4 col-xs-9">
		        <div class="form-group col-xs-4">
		        	<input type="number" min="0" id="newLineBeforeNum" class="form-control" value="0"/>
		        </div>
	        </div>
        </div>
        <div class="row form-actions">
	        <div class="col-md-6">
		        <div class="form-group">
		       		<button type="submit" id="btn_save" class="btn btn-primary">Save</button>
		        	<button type="button" id="btn_restore" class="btn btn-default">Cancel</button>
		        </div>
	        </div>
	        <div class="col-md-6">
	        	<span id="status">&nbsp;</span>
	        </div>
        </div>
        </form>
        
        <div class="row header-preview-small">
        	<div class="col-md-6 col-md-offset-3 header-preview">
        		<h4>Email Body Preview:</h4>
        	</div>
        </div>
        <div class="row body-preview-small">
        	<div class="col-md-6 col-md-offset-3 body-preview">
        		<span id="previewText"></span>
        	</div>
        </div>
        
        <br/>
    </div>
    
    </body>
</html>